<html><head><meta charset="utf-8"><title>20 Webpack 优化之速度优化-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/29" target="_blank">Webpack 从零入门到工程化实战</a>
                    <a href="" target="_blank">
                        <span>
                            / 3-4 20 Webpack 优化之速度优化
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                20 Webpack 优化之速度优化
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-06-24 09:32:18
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img3.mukewang.com/5cd9640a000113f306400360.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">什么是路？就是从没路的地方践踏出来的，从只有荆棘的地方开辟出来的。 <p class="author">—— 鲁迅</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">当 Webpack 的项目文件多了之后，构建过程会越来越慢，这时候就需要做一些构建速度方面的优化手段了，本篇文章就是介绍了构建速度优化相关的配置。影响 Webpack 构建速度的有两个「大户」：一个是 loader 和 plugin 方面的构建过程，一个就是压缩，把这两个东西优化起来，可以减少很多发布的时间，所以本文将从构建过程和压缩两个方面来做讲解。</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：</p>
<ol>
<li style="font-size: 20px; line-height: 38px;">使用最新版本的 Webpack 4 要比之前的 Webpack 3 和 2 版本快很多，所以单纯升级 Webpack 版本到最新版本就可以提升一大截构建速度；</li>
<li style="font-size: 20px; line-height: 38px;">区分开发和生产环境两套配置，各司其职，例如在开发阶段，代码压缩、目录清理、计算 hash、提取 CSS 这些都没有必要做。</li>
</ol>
</blockquote>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">要优化构建过程，可以从减少查找过程、多线程、提前编译和 Cache 多个角度来优化。</p>
</div><div class="cl-preview-section"><h2 id="减少查找过程" style="font-size: 30px;">减少查找过程</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在这里我们要做的事情是聚焦 Webpack 要处理的代码目录，帮助缩小 Webpack 的查找过程。</p>
</div><div class="cl-preview-section"><h3 id="使用-resolve.alias减少查找过程">使用 <code>resolve.alias</code>减少查找过程</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><code>resolve.alias</code> 配置项通过别名（alias）来把原导入路径映射成一个新的导入路径。比如我们经常使用的 react 库，其实 react 库中有两套代码，一套是基于 CommonJs 的模块化代码，一套是打包好的完整代码，react.js 用于开发环境，react.min.js 用生产环境。所以通过 resolve.alias 配置，可以让 Webpack 处理时，直接使用打包好的 react，从而跳过耗时的模块解析，还有我们项目中可能会有一些相对路径的写法，可以使用 alias 配置来减少查找过程，具体示例配置如下：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    resolve<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// 使用 alias 把导入 react 的语句换成直接使用单独完整的 react.min.js 文件，</span>
        <span class="token comment">// 减少耗时的递归解析操作</span>
        alias<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            react<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./node_modules/react/dist/react.min.js'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
            <span class="token string">'@lib'</span><span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./src/lib/'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h3 id="使用-resolve.extensions-优先查找">使用 <code>resolve.extensions</code> 优先查找</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试询问文件是否存在，查询的顺序是按照我们配置的<code>resolve.extensions</code>顺序从前到后查找，如果我们配置 <code>resolve.extensions= ['js', 'json']</code>，那么会先找<code>xxx.js</code>然后没有再查找<code>xxx.json</code>，所以我们应该把常用到的文件后缀写在前面，或者我们<strong>导入模块时，尽量带上文件后缀名</strong>。</p>
</div><div class="cl-preview-section"><h4 id="排除不需要解析的模块" style="font-size: 26px;">排除不需要解析的模块</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><code>module.noParse</code>配置项可以让 Webpack 忽略对部分没采用模块化的文件递归解析处理，例如：jQuery、ChartJS，它们体积庞大又没有采用模块化标准，让 Webpack 去解析这些文件耗时又没有意义，所以使用<code>module.noParse</code>排除它们。</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        noParse<span class="token punctuation">:</span> <span class="token regex">/node_modules\/(jquey\.js)/</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：被忽略掉的文件里不应该包含 <code>import</code>、<code>require</code>、<code>define</code> 等模块化语句，不然会导致构建出的代码中包含无法在浏览器环境下执行的模块化语句。</p>
</blockquote>
</div><div class="cl-preview-section"><h3 id="合理配置-rule-的查找范围">合理配置 rule 的查找范围</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在 rule 配置上，有<code>test</code>、<code>include</code>、<code>exclude</code>三个可以控制范围的配置，最佳实践是:</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">只在 <code>test</code> 和 文件名匹配中使用正则表达式；</li>
<li style="font-size: 20px; line-height: 38px;">在 <code>include</code> 和 <code>exclude</code> 中使用绝对路径数组；</li>
<li style="font-size: 20px; line-height: 38px;">尽量避免 <code>exclude</code>，更倾向于使用 <code>include</code>。</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">示例配置：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        <span class="token comment">// test 使用正则</span>
        test<span class="token punctuation">:</span> <span class="token regex">/\.js$/</span><span class="token punctuation">,</span>
        loader<span class="token punctuation">:</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
        <span class="token comment">// 排除路径使用数组</span>
        exclude<span class="token punctuation">:</span> <span class="token punctuation">[</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./node_modules'</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token comment">// 查找路径使用数组</span>
        include<span class="token punctuation">:</span> <span class="token punctuation">[</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./src'</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：<code>exclude</code>优先级要优于<code>include</code>和<code>test</code>，所以当三者配置有冲突时，<code>exclude</code>会优先于其他两个配置。</p>
</blockquote>
</div><div class="cl-preview-section"><h2 id="利用多线程提升构建速度" style="font-size: 30px;">利用多线程提升构建速度</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以 Webpack 需要处理的事情需要一件一件的做，不能多件事一起做。<br>
我们需要 Webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力，HappyPack  就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。<br>
我们知道 Node.js 是单线程模型的，Webpack 运行在 Node.js 上处理事情是一件件处理的，我们可以通过插件方式让 Webpack 支持多个线程进行同时打包，以便提高编译打包的速度。但是需要注意的是，如果项目比较简单，没有必要采用这种方式，简单的项目而使用多线程编译打包会因为多线程打包浪费更多的 CPU 资源，这样最终结果是不仅不能加快打包的速度，反而会降低打包的速度。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">多线程打包有两种方案：<a href="https://github.com/webpack-contrib/thread-loader">thread-loader</a>和<a href="https://github.com/amireh/happypack">HappyPack</a>。</p>
</div><div class="cl-preview-section"><h3 id="thread-loader">thread-loader</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">thread-loader 是针对 loader 进行优化的，它会将 loader 放置在一个 worker 池里面运行，以达到多线程构建。thread-loader 在使用的时候，需要将其放置在其他 loader 之前，如下面实例：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// webpack.config.js</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.js$/</span><span class="token punctuation">,</span>
                include<span class="token punctuation">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'src'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                use<span class="token punctuation">:</span> <span class="token punctuation">[</span>
                    <span class="token string">'thread-loader'</span>
                    <span class="token comment">// 你的高开销的loader放置在此 (e.g babel-loader)</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h3 id="happypack">HappyPack</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">HappyPack 是通过多进程模型，来加速代码构建，具体的原理部分可以看它的介绍，里面有个详细的流程图，下面直接上它的示例代码：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// webpack.config.js</span>
<span class="token keyword">const</span> os <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'os'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> HappyPack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'happypack'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 根据 cpu 数量创建线程池</span>
<span class="token keyword">const</span> happyThreadPool <span class="token operator">=</span> HappyPack<span class="token punctuation">.</span><span class="token function">ThreadPool</span><span class="token punctuation">(</span><span class="token punctuation">{</span>size<span class="token punctuation">:</span> os<span class="token punctuation">.</span><span class="token function">cpus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    module<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.js$/</span><span class="token punctuation">,</span>
                use<span class="token punctuation">:</span> <span class="token string">'happypack/loader?id=jsx'</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>

            <span class="token punctuation">{</span>
                test<span class="token punctuation">:</span> <span class="token regex">/\.less$/</span><span class="token punctuation">,</span>
                use<span class="token punctuation">:</span> <span class="token string">'happypack/loader?id=styles'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">HappyPack</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            id<span class="token punctuation">:</span> <span class="token string">'jsx'</span><span class="token punctuation">,</span>
            <span class="token comment">// 多少个线程</span>
            threads<span class="token punctuation">:</span> happyThreadPool<span class="token punctuation">,</span>
            loaders<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'babel-loader'</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>

        <span class="token keyword">new</span> <span class="token class-name">HappyPack</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            id<span class="token punctuation">:</span> <span class="token string">'styles'</span><span class="token punctuation">,</span>
            <span class="token comment">// 自定义线程数量</span>
            threads<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
            loaders<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token string">'style-loader'</span><span class="token punctuation">,</span> <span class="token string">'css-loader'</span><span class="token punctuation">,</span> <span class="token string">'less-loader'</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：给 loader 配置使用 HappyPack 需要对应的 loader 支持才行，例如 url-loader 和 file-loader 就不支持 HappyPack，在 HappyPack 的 wiki 中有一份支持 loader 的<a href="https://github.com/amireh/happypack/wiki/Loader-Compatibility-List">列表</a>。</p>
</blockquote>
</div><div class="cl-preview-section"><h2 id="使用-webpack.dllplugin-来预先编译" style="font-size: 30px;">使用 webpack.DllPlugin 来预先编译</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">预先编译和打包不会变动存在的文件，在业务代码中直接引入，加快 Webpack 编译打包的速度，但是并不能减少最后生成的代码体积。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">例如下面代码：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> ReactDOM<span class="token punctuation">,</span> <span class="token punctuation">{</span>render<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">使用了 react 和 react-dom 两个库，这两个库一般我们日常业务代码开发的时候并不会升级版本或者修改内部代码，但是在每次构建的时候，这些代码都会重新编译和打包，这样就很浪费时间，<code>webpack.DllPlugin</code>就是来解决这个问题的插件，使用它可以在第一次编译打包后就生成一份不变的代码供其他模块引用，这样下一次构建的时候就可以节省开发时编译打包的时间。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">要使用<code>DllPlugin</code>的功能，需要配合<code>webpack.DllReferencePlugin</code>来使用。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><strong>DLLPlugin</strong> 这个插件是在一个额外独立的 Webpack 设置中创建一个只有公共库的 dll 文件，这时候我们项目中应该单独为 dll 文件创建一个配置文件，例如<code>webpack.config.dll.js</code>，<code>webpack.config.dll.js</code> 作用是把所有的第三方库依赖打包到一个 bundle 的 <code>dll</code> 文件里面，还会生成一个名为 <code>manifest.json</code> 文件。生成的 <code>manifest.json</code> 会让 <code>DllReferencePlugin</code>在<code>webpack.config.js</code>配置中映射到相关的依赖上去的。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><strong>DllReferencePlugin</strong> 这个插件是在 <code>webpack.config.js</code> 中使用的，该插件的作用是把刚刚在 <code>webpack.config.dll.js</code> 中打包生成的 dll 文件引用到需要的预编译的依赖上来。什么意思呢？就是说，假设在 <code>webpack.config.dll.js</code> 中打包后会生成 <code>dll.js</code> 文件和 <code>manifest.json</code>两个文件，<code>dll.js</code> 文件包含所有的第三方库文件，<code>manifest.json</code> 文件会包含所有库代码的一个索引，当在使用 <code>webpack.config.js</code> 文件打包 <code>DllReferencePlugin</code> 插件的时候，会使用该 <code>DllReferencePlugin</code> 插件读取 <code>vendor-manifest.json</code> 文件，看看是否有该第三方库。<code>manifest.json</code> 文件就是有一个第三方库的一个映射而已。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">当第一次使用 <code>webpack.config.dll.js</code> 文件会对第三方库打包，打包完成后就不会再打包它了，然后每次运行 <code>webpack.config.js</code> 文件的时候，都会打包项目中本身的文件代码，当需要使用第三方依赖的时候，会使用 <code>DllReferencePlugin</code> 插件去读取第三方依赖库，而只有我们修改第三方公共库的时候，才会执行<code>webpack.config.dll.js</code>。本质上来说 DLL 方案就是一种缓存机制。</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：DLL 是动态链接库（Dynamic-link library）的英文缩写，最早是微软提出来的一种共享函数库概念，实际就是将一些经常会共享的代码制作成 DLL 文档，当其他代码需要使用这些 DLL 中的代码时，Windows 操作系统会将 DLL 文档加载到内存中。这里借用了 DLL 的概念，帮助 Webpack 使用者理解用途。</p>
</blockquote>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们接下来看看具体怎么配置，首先我们的<code>src/index.js</code>按照正常代码写法即可，例如内容如下：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">import</span> React<span class="token punctuation">,</span> <span class="token punctuation">{</span>Component<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> ReactDOM<span class="token punctuation">,</span> <span class="token punctuation">{</span>render<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>React<span class="token punctuation">,</span> Component<span class="token punctuation">,</span> ReactDOM<span class="token punctuation">,</span> render<span class="token punctuation">,</span> <span class="token string">'hell dll'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">然后我们创建一个<code>webpack.config.dll.js</code>，这里面添加了我们需要打包的第三方依赖库 react 和 react-dom：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// webpack.config.dll.js</span>
<span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 这里是第三方依赖库</span>
<span class="token keyword">const</span> vendors <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'react'</span><span class="token punctuation">,</span> <span class="token string">'react-dom'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    mode<span class="token punctuation">:</span> <span class="token string">'production'</span><span class="token punctuation">,</span>
    entry<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// 定义程序中打包公共文件的入口文件vendor.js</span>
        vendor<span class="token punctuation">:</span> vendors
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        filename<span class="token punctuation">:</span> <span class="token string">'[name].[chunkhash].js'</span><span class="token punctuation">,</span>
        <span class="token comment">// 这里是使用将 verdor 作为 library 导出，并且指定全局变量名字是[name]_[chunkhash]</span>
        library<span class="token punctuation">:</span> <span class="token string">'[name]_[chunkhash]'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>DllPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            <span class="token comment">// 这里是设置 mainifest.json 路径</span>
            path<span class="token punctuation">:</span> <span class="token string">'manifest.json'</span><span class="token punctuation">,</span>
            name<span class="token punctuation">:</span> <span class="token string">'[name]_[chunkhash]'</span><span class="token punctuation">,</span>
            context<span class="token punctuation">:</span> __dirname
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这时候执行<code>webpack --config webpack.config.dll.js</code>，这显示打包成功：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5d076b450001d70916820648.png" alt="图片描述" data-original="http://img.mukewang.com/5d076b450001d70916820648.png" class="" style="cursor: pointer;"><br>
查看一下目录结构如下：</p>
</div><div class="cl-preview-section"><pre class="  language-bash"><code class="prism  language-bash">├── dist
│   └── vendor.1c25daba4f58872736ee.js <span class="token comment"># 这个是刚刚打包出来的 dll 文件</span>
├── manifest.json    <span class="token comment"># 这个是配置文件，后续要用</span>
├── node_modules
├── package.json
├── src
│   └── index.js
├── webpack.config.dll.js <span class="token comment"># dll 配置</span>
└── webpack.config.js <span class="token comment"># 普通配置</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下面我们来看下正常项目的配置文件<code>webpack.config.js</code>是怎么配置的，<code>webpack.config.js</code>中我们需要使用<code>DllReferencePlugin</code>指定<code>manifest.json</code>的内容即可：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// webpack.config.js</span>
<span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        filename<span class="token punctuation">:</span> <span class="token string">'[name].[chunkhash].js'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    entry<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        app<span class="token punctuation">:</span> <span class="token string">'./src/index.js'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    plugins<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>DllReferencePlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            context<span class="token punctuation">:</span> __dirname<span class="token punctuation">,</span>
            <span class="token comment">// 这里导入 manifest配置内容</span>
            manifest<span class="token punctuation">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./manifest.json'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这时候执行<code>webpack</code>命令就可以生成<code>app.js</code>文件了，并且<code>app.js</code>并不会包含 dll 打包出来的<code>vendor.js</code>文件内容，打包速度也提升了不少！</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5d076b5b0001939415760456.png" alt="图片描述" data-original="http://img.mukewang.com/5d076b5b0001939415760456.png" class="" style="cursor: pointer;"></p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：在实际操作中，HTML 中不会主动引入 dll 的 vendor.js 文件，这时候需要我们想办法手动或者通过插件添加进去，比如使用<a href="https://github.com/SimenB/add-asset-html-webpack-plugin">add-asset-html-webpack-plugin</a>，或者在 dll 打包的时候就修改一下 html-webpack-plugin 的 template 文件，正常打包的时候直接使用这个 template 文件再打包一次即可。</p>
</blockquote>
</div><div class="cl-preview-section"><h2 id="缓存（cache）相关" style="font-size: 30px;">缓存（Cache）相关</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">提升构建速度的另外一个大杀器是使用缓存！下面介绍两种缓存方式。</p>
</div><div class="cl-preview-section"><h3 id="babel-loader-配置">babel-loader 配置</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">Webpack 中打包的核心是 JavaScript 文件的打包，JavaScript 使用的是 babel-loader，其实打包时间长很多时候是 babel-loader 执行慢导致的。这时候我们不仅要使用<code>exclude</code>和<code>include</code>来尽可能准确的指定要转换内容的范畴，还需要关注 babel-loader 在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译的速度。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">babel-loader 提供了 <code>cacheDirectory</code> 配置给 Babel 编译时给定的目录，并且将用于缓存加载器的结果，但是这个设置默认是<code>false</code>关闭的状态，我们需要设置为<code>true</code>，这样 babel-loader 将使用默认的缓存目录 。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><code>node_modules/.cache/babel-loader</code>，如果在任何根目录下都没有找到 <code>node_modules</code> 目录，将会降级回退到操作系统默认的临时文件目录。</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">rules<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        test<span class="token punctuation">:</span> <span class="token regex">/\.js$/</span><span class="token punctuation">,</span>
        loader<span class="token punctuation">:</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
        options<span class="token punctuation">:</span> <span class="token punctuation">{</span>
            cacheDirectory<span class="token punctuation">:</span> <span class="token boolean">true</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 排除路径</span>
        exclude<span class="token punctuation">:</span> <span class="token regex">/node_modules/</span><span class="token punctuation">,</span>
        <span class="token comment">// 查找路径</span>
        include<span class="token punctuation">:</span> <span class="token punctuation">[</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'.src'</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h2 id="其他构建过程的优化点" style="font-size: 30px;">其他构建过程的优化点</h2>
</div><div class="cl-preview-section"><ol>
<li style="font-size: 20px; line-height: 38px;">sourceMap 生成耗时严重，根据之前 sourceMap[TODO](sourcemap 表格链接)表格选择合适的<code>devtool</code>值；</li>
<li style="font-size: 20px; line-height: 38px;">切换一些 loader 或者插件，比如：<a href="https://github.com/yibn2008/fast-sass-loader">fast-sass-loader</a>可以并行处理 sass 文件，要比 sass-loader 快 5~10 倍；</li>
</ol>
</div><div class="cl-preview-section"><h2 id="压缩速度优化" style="font-size: 30px;">压缩速度优化</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">相对于构建过程而言，压缩相对我们来说只有生产环境打包才会做，而且压缩我们除了添加 cache 和多线程支持之外，可以优化的空间较小。我们在使用<a href="https://github.com/webpack-contrib/terser-webpack-plugin">terser-webpack-plugin</a>的时候可以通过下面的配置开启多线程和缓存：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">const</span> TerserPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'terser-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    optimization<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        minimizer<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token keyword">new</span> <span class="token class-name">TerserPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                cache<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 开启缓存</span>
                parallel<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token comment">// 多线程</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><h2 id="总结" style="font-size: 30px;">总结</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本文主要从构建速度角度来介绍如何提升打包速度，分别从构建过程和压缩两个维度来介绍提升速度的方法，其中压缩角度可以优化的点比较少，而在构建过程中可以从减少查找过程、多线程、提前编译和缓存多个角度来优化，其中重点介绍了使用减少查找过程的几种配置方式，使用 thread-loader 和 HappyPack 来开启多线程，使用 DLLPlugin 来预先编译和使用 babel-loader 的缓存等方法。实际项目中并不是非要做构建速度的优化，如果项目简单完全没有必要，当做构建速度优化的时候也并不是本文介绍的所有方式都可以使用，要具体问题具体分析。不管怎样，保持 Webpack 版本最新是一个既简单又效果不错的方式！</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">本小节 Webpack 相关面试题：</p>
<p style="font-size: 20px; line-height: 38px;">本章节一直在回答一个问题：Webpack 怎么优化。本小节主要从 Webpack 打包速度的方面介绍 Webpack 优化方案。</p>
</blockquote>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/277">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    19 使用 Webpack 的 splitChunks 功能来拆分代码
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/279">
                                                    <div class="next r clearfix">
                                <p>
                                    21 使用 Webpack 的 Tree-Shaking
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">
        </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>